<template>
    <div>
        <van-row>
            <van-col span = '6'>
                <div  id="left_nav">
                    <ul>
                        <li @click="navChange(index,item.id)" :class="{navActive : navIndex == index}" v-for="(item, index) in category" :key="index">
                            {{item.mainName}}
                        </li>
                    </ul>
                </div>
            </van-col>
            <van-col span = '18'>
                <div class="top_nav">
                    <van-tabs v-model="active" @click="topNavChange">
                        <van-tab v-for="(item, index) in shopCategory" :key="index" :title="item.subName"  >

                        </van-tab>
                    </van-tabs>
                </div>
                <div id="list-div">
                    <van-pull-refresh v-model="isRefresh" @refresh="onRefresh">
                        <van-list
                            v-model="loading"
                            :finished="finished"
                            finished-text="没有更多了"
                            @load="onLoad"
                            >
                            <div class="list-item" @click="jumpGoodsInfo(item.id)" v-for="(item,index) in goodList" :key="index">
                                <div class="list-item-img">
                                    <img :src="item.productImg" height="75rem" width="100%"/>
                                </div>
                                <div class="list-item-text">
                                    <div>{{item.productName}}</div>
                                    <div class="list-item-price">
                                        <b class="discount">折扣价:￥{{item.presentPrice}}</b>
                                        <span class="price-text">原价:￥{{item.oldPrice}}</span> 
                                    </div>
                                </div>
                                
                            </div>
                        </van-list>
                    </van-pull-refresh>
                </div>
            </van-col>
        </van-row>
    </div>
</template>

<script>
    import axios from 'axios'
    import { Toast } from 'vant'
    export default {
        data(){
            return {
                category: [],
                navIndex: 0,
                // mainId: null,
                shopCategory:[],
                active:0,
                loading: false,   //上拉加载使用
                finished: false,  //上拉加载是否没有数据了
                isRefresh:false, //下拉刷新
                list: [],
                pageNum: 1,  //商品列表页数
                goodList: [], //商品列表信息
                categorySubId: null, //子类id
            } 
        },
        created(){
            this.getMallCategory()
        },
        mounted(){//mounted挂载完成
            let winHeight = document.documentElement.clientHeight
            // console.log("222222222222222",winHeight);
            document.getElementById("left_nav").style.height = winHeight + 'px'
            document.getElementById('list-div').style.height=winHeight-100 +'px'
        },   
        methods:{
            getMallCategory(){//获取主分类名称列表
                axios({
                     url: 'http://localhost:3000/category/mailCategory',
                     method: 'get',
                }).then(res=>{
                    const { status,data} = res
                    if(status === 200){
                        if(data.message){
                            this.category = data.message
                            console.log(this.category);
                            this.getSubCategory(this.category[0].id)
                        }
                    }else{
                        Toast('服务器错误，数据取得失败')
                    }
                })
            },
            getSubCategory(categoryId){//根据大类获取子分类名称列表
                axios({
                     url: 'http://localhost:3000/category/subCategory',
                     method: 'post',
                     data:{
                            mainId:categoryId,
                        } 
                }).then(res=>{
                    console.log(res);
                    const { status,data} = res
                    if(status === 200){
                        if(data.message){
                            this.shopCategory = data.message
                            this.active = 0
                            this.categorySubId = this.shopCategory[0].id
                            this.getGoodList()
                        }

                    }else{
                        Toast('服务器错误，数据取得失败')
                    }
                    console.log(this.shopCategory);
                })
                .catch(error=>{
                    console.log(error)
                })
                     
            },
            getGoodList(){//根据子类id获取商品
                axios({
                     url: 'http://localhost:3000/category/getGoodsListByCategorySubID',
                     method: 'post',
                     data:{
                            categorySubId: this.categorySubId,
                            pageNum: this.pageNum

                        } 
                }).then(response =>{
                    console.log(response.data);
                    if(response.status == 200  ){
                        if(response.data.message){
                            this.pageNum++
                            console.log(this.pageNum);
                            this.goodList=this.goodList.concat(response.data.message)
                        }else{
                            this.finished = true;
                        }
                    } 
                    this.loading=false;
                    console.log(this.finished)
                })
                .catch(error=>{
                    console.log(error)
                })
            },
            navChange(index,mainId){//左侧导航栏改变
                this.navIndex = index
                this.pageNum = 1
                this.finished =false
                this.goodList = []
                // this.categorySubId = null
                this.getSubCategory(mainId)
                // this.onLoad()
                console.log("---------",mainId,this.categorySubId);
            },
            topNavChange(index,title){
                this.categorySubId = this.shopCategory[index].id
                console.log("============",this.categorySubId);
                this.goodList = []
                this.finished = false
                this.pageNum = 1
                this.getGoodList() 
                // setTimeout(() => {
                    // this.onLoad()
                // }, 1000);   
            },
             //上拉加载函数
            onLoad(){
                setTimeout(()=>{
                    this.categorySubId = this.categorySubId ? this.categorySubId : this.shopCategory[0].id
                    this.getGoodList()
                },1000)
            },
            //下拉刷新
            onRefresh(){
                setTimeout(() => {
                    this.isRefresh = false;
                    // console.log("1111111111111111111111");
                    this.goodList=[]
                    this.pageNum = 1
                    this.onLoad()
                }, 500);
            },

            //跳转到商品详细页
            jumpGoodsInfo(id){
                console.log("id========",id);
                this.$router.push({name:'goodDetail',params:{goodsId:id}})
                // this.$router.push('/goodDetail')
            }
        }
    }
</script>

<style lang="scss" scoped>
    #left_nav{
        background-color: #E8E8E8;
    }
    #left_nav ul li{
        line-height: 2.4rem;
        border-bottom: 1px solid #C8C8C8;
        padding: 3px;
        text-align: center;
        font-size: 1rem;
    }
    .navActive{
        background-color: floralwhite;
    }
   .list-item{
        display: flex;
        flex-direction: row;
        font-size:0.8rem;
        border-bottom: 1px solid #f0f0f0;
        background-color: #fff;
        padding:5px;
    }
    #list-div{
        overflow: scroll;
    }
    .list-item-img{
        flex:8;
    }
    .list-item-text{
        flex:16;
        margin-top:10px;
        margin-left:10px;
    }
    .list-item-price{
        margin-top: 1rem;
        display: flex;
    }
    .discount{
        color: red;
        margin-right: 1rem;
    }
    .price-text{
        text-decoration: line-through;
        // display:block;
    }
</style>